<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>

    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- 用于将jsx转换为js -->
    <script text="text/javascript" src="./React-js/16.8/babel.min.js"></script>

    <script type="text/babel">

        class Count extends React.Component {
            constructor(props) {
                console.log('constructor----------',props);
                super(props)
                // 初始化状态
                this.state = { count: 0 }
            }
            add = () => {
                this.setState({ count: this.state.count + 1 })
            }
            force = () => {
                // 不受shouldComponentUpdate影响
                this.forceUpdate()
            }
            // 卸载组件
            unload = () => {  
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }

            // 若state的值在任何时候都取决于props，那么可以使用该生命周期钩子
            static getDerivedStateFromProps(props, state) {
                console.log('getDerivedStateFromProps', props, state);
                // 如果返回一个对象，则相当于修改了state，
                // return props
                // return null
            }

            // 俗称快照
            getSnapshotBeforeUpdate(){
                console.log('getSnapshotBeforeUpdate');
                return null
                // return 'song'
            }

            // 组件初始化挂载前----------18已经弃用
            // componentWillMount() {
            //     console.log('componentWillMount-----组件初始化挂载前');
            // }
            componentDidMount() {
                console.log('componentDidMount------------------------组件初始化挂载完');
            }

            componentWillUnmount() {
                console.log('componentWillUnmount----------------组件卸载前');
            }

            /* 更新流程 */
            // 不写默认返回true。控制组件更新，需要返回true才能执行后面更新操作
            shouldComponentUpdate() {
                console.log('shouldComponentUpdate--------------更新阀门');
                return true
            }
            // 组件更新前----------18已经弃用
            // componentWillUpdate() {
            //     console.log('componentWillUpdate------------组件更新前');
            // }
            componentDidUpdate(preProps,preState,snapshotValue) {   // (旧的，旧的)
                console.log('componentDidUpdate-------------组件更新完',preProps,preState,snapshotValue);
            }

            render() {
                console.log('render----------------',this);
                const { count } = this.state
                return (
                    <div>
                        <h2>当前的求和为：{count}</h2>
                        <button onClick={this.add}>点击+1</button>
                        <button onClick={this.force}>强制更新</button>
                        <button onClick={this.unload}>卸载</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<Count count={66} />, document.querySelector('#test'))
    </script>
</body>

</html>